<template>
  <view>
    <view 
      class="bill-month-group" 
      v-for="(monthGroup, idx) in refundData" 
      :key="idx"
    >
      <view class="bill-month-header">
        <text class="month">{{ monthGroup.month }}</text>
        <text class="summary">
          总退款: ¥{{ monthGroup.totalRefund }}
        </text>
      </view>

      <view 
        class="bill-item" 
        v-for="(item, i) in monthGroup.items" 
        :key="i"
      >
        <image class="bill-icon" :src="item.icon" />
        <view class="bill-info">
          <view class="bill-title">{{ item.title }}</view>
          <view class="bill-date">{{ item.date }}</view>
        </view>
        <view class="bill-amount in">
          ¥{{ item.amount }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onMounted } from 'vue';
import { getRefundTransactions } from '../../../utils/api';

const refundData = ref([
  {
    month: '十月',
    totalRefund: '150.00',
    items: [
      {
        icon: '/static/taobao.png',
        title: '淘宝退款',
        date: '2023-10-04 16:00:00',
        amount: '150.00',
      },
    ],
  },
])

// 获取数据
onMounted(()=>{
	getRefundTransactions().then(res=>{
		// 构造合适的数据
		// 加入到refundData中
		refundData.value.push(res)
	})
})

</script>
<style src="./all.css"></style> 